<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .body {
            width: 400px;
            background-color: rgb(252, 223, 223);
            position: absolute;
            top: 60px;
            bottom: 50px;
        }

        .header-top {
            height: 60px;
            width: 400px;
            background-color: pink;
            display: flex;
            justify-content: space-between;
        }

        .header-top img {
            border-radius: 50%;
        }

        p {
            z-index: 10;
        }

        .base {
            width: 400px;
            display: flex;
            height: 50px;
            background-color: rgb(177, 112, 124);
            position: absolute;
            bottom: 0;
            justify-content: space-around;
            align-items: center;
        }

        .base img {
            width: 40px;
        }

        .right-img {
            font-size: 40px;
            margin-right: 20px;
        }

        .qq {
            height: 100%;
            width: 400px;
            background-color: rgb(252, 223, 223);
        }

        .person-img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        .person-p {
            align-items: center;
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script>
        let Home = {
            template: `
                <div class="header">
                        <div class="header-top">
                            <img src="./头像.jpg" alt="">
                            <div>
                                {{center}}
                            </div>
                            <div class="right-img">
                                {{right}}
                                <slot name="right">+</slot>
                            </div>
                        </div>
                        <div class="body">消息页面</div>
                </div>
            `,
            props: {
                center: {
                    type: String
                },
                right: {
                    type: String
                }
            }
        }
        let massage = {
            template: `
            <div class="massage">
                <home center="消息"> </home>
                    <p>消息组件</p>
            </div>
            `, components: { Home },
        }
        let person = {
            template: `
            <div class="person">
                <home center="联系人">
                    <p slot="center" class="person-p">联系人</p>
                    <img slot="right" src="./添加好友.svg" alt="" 
                    class="person-img"></img>
                </home>
                <div class="body">联系人页面</div>
            </div>
            `, components: { Home },
        }
        let dynamic = {
            template: `
            <div class="dynamic">
                <home center="动态">
                    <p slot="center" class="person-p">动态</p>
                    <img slot="right" src="./排序-左右.svg" alt="" 
                    class="person-img">图标2</img>
                </home>
                <div class="body">动态组件页面</div>
            </div>
            `, components: { Home },
        }
        let App = {
            template: `
                <div class="qq">
                        <component :is="active"></component>
                        <div class="base">
                        <div v-for="item in navList" 
                        @click="changeNav(item.activeName)"
                        :style="{color:activeNav === item.activeName? '#fff':'#000'}">{{item.name}}</div>
                    </div>
                </div>
            `,
            data() {
                return {
                    navList: [
                        { name: '消息', activeName: 'massage' },
                        { name: '联系人', activeName: 'person' },
                        { name: '动态', activeName: 'dynamic' }
                    ],
                    active: 'home'
                }
            },
            methods: {
                changeNav(name) {
                    console.log('name', name);
                    this.active = name;
                }
            },

        }
        new Vue({
            render: h => h(App)
        }).$mount("#app")
    </script>
</body>

</html>